﻿requirejs.config({
    baseUrl: ".",
    paths: {
    	zepto:"javascripts/zepto.min",
    	dingtalk:"javascripts/dingtalk",
        vue: "components/vue/vue.min",
        axios: "components/axios/axios.min",
        echarts: "components/echarts/echarts.common.min",
        common: "resources/js/common"
    }
});

require(["zepto","dingtalk","vue", "axios", "common", "echarts"], function (zepto,dingtalk,Vue, axios, common, echarts) {

    var vm = new Vue({
        el: "#view",
        data: {
            reportType: 1,
            bars: [1, 1],
            pies: [1, 1],
            reportInfo: [],
            description: ""
        },
        mounted: function () {
            this.reportChange();
        },
        methods: {
            reportChange: function () {
                var self = this;

                var id = common.getParam("id")

                axios.get("report/getChartsById?id=" + id)
                    .then(function (response) {
                        for (var i = 0; i < 2; i++) {
                            if (response.data.bar[i]) {
                                var id = "bar" + i;
                                var bar = response.data.bar[i];
                                self.setBar(bar.name, bar.data, id);
                            } else {
                                Vue.set(self.bars, i, 0);
                            }
                        }

                        for (var i = 0; i < 2; i++) {
                            if (response.data.pie[i]) {
                                var id = "pie" + i;
                                var pie = response.data.pie[i];
                                self.setPie(pie.name, pie.data, id);
                            } else {
                                Vue.set(self.pies, i, 0);
                            }
                        }
                    });


                axios.get("report/getIndexById?id=" + id)
                    .then(function (response) {
                        self.description = response.data.description;

                        self.reportInfo = [];
                        for (var name in response.data.data) {
                            self.reportInfo.push({
                                key: name,
                                value: response.data.data[name]
                            })
                        }
                    })
            },
            setBar: function (title, bar, id) {
                var names = [];
                var values = [];

                var data = [];

                for (var name in bar) {
                    names.push(name + "\r\n" + bar[name]);
                    values.push(bar[name]);

                    data.push({
                        name: name + "\r\n" + bar[name],
                        data: [bar[name]],
                        type: "bar"
                    })
                }

                var size27 = 13;
                var size30 = 15;

                var option = {
                    title: {
                        text: title,
                        padding: size27,
                        textStyle: {
                            color: "#323232",
                            fontSize: size27
                        }
                    },
                    grid: {
                        top: "15%",
                        bottom: "15%"
                    },
                    xAxis: {
                        data: names,
                        axisLabel: {
                            textStyle: {
                                color: "#909090",
                                fontSize: size30
                            }
                        }
                    },
                    yAxis: {
                        axisLabel: {
                            textStyle: {
                                color: "#909090",
                                fontSize: size27
                            }
                        }
                    },
                    series: [{
                        name: "单数",
                        type: "bar",
                        data: values
                    }],
                    backgroundColor: "#F0F0F0",
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colors = ["#3E75E4", "#3ECBE5", "#E6AD40"];
                                return colors[params.dataIndex];
                            }
                        }
                    }
                };

                this.setChart(id, option);
            },
            setPie: function (title, pie, id) {
                var data = [];

                for (var name in pie) {
                    data.push({
                        name: name,
                        value: pie[name]
                    });
                }

                var size27 = 13;
                var size30 = 15;
                var colors = ["#3E75E4", "#3ECBE5", "#E6AD40"];

                option = {
                    color: colors,
                    backgroundColor: "#F0F0F0",
                    title: {
                        text: title,
                        padding: size27,
                        textStyle: {
                            color: "#323232",
                            fontSize: size27
                        }
                    },
                    series: [{
                        name: "评价数量",
                        type: "pie",
                        radius: ["50%", "70%"],
                        data: data,
                        label: {
                            normal: {
                                show: false,
                                position: "center"
                            },
                            emphasis: {
                                show: true,
                                formatter: "{b}: {c}\r\n{d}%",
                                textStyle: {
                                    fontSize: size30
                                }
                            }
                        }
                    }],
                    legend: {
                        orient: "vertical",
                        y: "center",
                        right: "0",
                        data: data,
                        formatter: "{name}",
                        textStyle: {
                            color: "#323232",
                            fontSize: size27
                        }
                    }
                };

                this.setChart(id, option);
            },
            setChart: function (id, option) {
                var chart = echarts.init(document.getElementById(id));
                chart.setOption(option);
            }
        }
    });
});